<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
  /** 1 */
  // let context = canvas.getContext('2d');
  // context.moveTo(230, 10);
  // //arcTo(x1,y1,x2,y2,radius):从上一点开始绘制一条弧线，到(x2,y2)为止，并以给定的半径穿过（x1,y1）
  // context.arcTo(280, 60, 330, 10, 50);
  // //bezierCurveTo(c1x,c1y,c2x,c2y,x,y):从上一点开始绘制一条曲线，到(x,y)为止，并以(c1x,c1y)(c2x,c2y)为控制点
  // context.bezierCurveTo(210, 70, 290, 90, 300, 100);
  // context.moveTo(320, 10);
  // //quadraticCurveTo(cx,cy,x,y):从上一点开始绘制一条二次曲线，到(x,y)为止，并以(cx,cy)为控制点
  // context.quadraticCurveTo(420, 100, 400, 10);
  // //rect(x,y,width,height):从点(x,y)开始绘制矩形，此方法绘制的是矩形路径而不是独立的形状
  // context.rect(450, 10, 50, 50);
  // context.stroke();
</script>
</body>
</html>